  //配置
  var config = {
      vx: 4, //小球x轴速度,正为右，负为左
      vy: 4, //小球y轴速度
      height: 2, //小球高宽，其实为正方形，所以不宜太大
      width: 2,
      count: 200, //点个数
      // color: "121, 162, 185", 	//点颜色
      color: "200,193,193", //点颜色
      // stroke: "130,255,255", 		//线条颜色
      // stroke: "240,250,228", 		//线条颜色
      stroke: "0,0,0", //线条颜色
      dist: 6000, //点吸附距离
      e_dist: 20000, //鼠标吸附加速距离
      max_conn: 10 //点到点最大连接数
  }

  //调用
  CanvasParticle(config);

  /* 
   *
   */
  // 价格模拟服务器的数据

  let uldata = [
          { "count": 4000, "price": 1200, "unitPrice": "0.3000" },
          { "count": 8000, "price": 2000, "unitPrice": "0.2500" },
          { "count": 40000, "price": 8000, "unitPrice": "0.2000" }
      ]
      //   定义html代码片段
  let ulhtml = ``
      /* 获取元素 */

  uldata.forEach(function(v, i) {
      //   console.log(v);
      /* 设置代码片段  用三元运算符进行判断 */
      ulhtml += `<li class=" ${i===0 ? 'ulli':''}" data-price='￥${v.price}' data-unit-price='${v.unitPrice}'>${v.count} </li>`
  })
  $('.cdz').innerHTML = ulhtml; //渲染到网页中

  $('.cdz').addEventListener('click', function(e) {

      if (e.target.nodeName === 'LI') {
          [...$('.cdz').children].forEach(function(v) {
              //   console.log(v);
              v.classList.remove('ulli')
          });
          e.target.classList.add('ulli')

          $('.ul-red').textContent = e.target.dataset.price;
          $('.price').textContent = e.target.dataset.unitPrice;
      }
  })



  /* 选选项卡 */

  /* 需求： 点击头部的导航栏，切换下面主题内容 */

  /* 获取所有的li */
  let li = $a('.tabfa li')
      //   console.log(li);
      /* 获取所有的div */
  let div = $a('.tabbox')
      //   console.log(div);
      /* 遍历出每一个li  */
  li.forEach(function(v, i) {
      /*  给li注册点击事件*/
      v.addEventListener('click', function() {
          /* 双重遍历出每一个li */
          li.forEach(function(v2, i2) {
                  /* 清空丽的所有类名 */
                  v2.className = ''
                      /* 应为div索引和li的索引相同，直接引用 */
                  div[i2].style.display = 'none';
              })
              /* 给li标签赋上属性 */
          this.className = ('tabson')
              /* 同时改变div的索引值 */
          div[i].style.display = 'block';
      })

  })